iT邦幫忙

2022 iThome 鐵人賽

DAY 7
0
自我挑戰組

網頁前端設計系列 第 7

Day7-HTML(五):段落標題與空白字元

  • 分享至 

  • xImage
  •  

這次會介紹<body>標籤裡,一個網路文章頁面最常用也是最基礎,用來設定顯示文字的標籤,也會有直接實作的部分~
(๑•̀ㅂ•́)و✧

在這之前,程式碼寫好了,勢必一定要執行跑出結果,而這時候只要按下右鍵,選Open with Live Server就會跳轉到瀏覽器、生成出你寫的網頁頁面囉~
https://ithelp.ithome.com.tw/upload/images/20220907/2015199285A9bd2JR8.png
->
https://ithelp.ithome.com.tw/upload/images/20220907/20151992JDOyTzurSw.png

1. <p> 段落標籤

用來輸入一段文字段落。預設是會在段落間換行和留邊距。

  • 如果程式碼直接這樣寫的話:
    第一段文字
    第二段文字
    https://ithelp.ithome.com.tw/upload/images/20220907/201519922kP4HP1aFZ.png
    -> 在螢幕上會長這樣:
    第一段文字 第二段文字
    (同一段空一格接續)
    https://ithelp.ithome.com.tw/upload/images/20220907/20151992G1MrgKqs81.png

  • 如果使用<p>段落標籤:
    <p>第一段文字</p>
    <p>第二段文字</p>
    https://ithelp.ithome.com.tw/upload/images/20220907/20151992hUM8f1oqlS.png
    -> 在螢幕上就會長這樣:
    第一段文字
    第二段文字
    (段落換行)
    https://ithelp.ithome.com.tw/upload/images/20220907/20151992waDLCxySCv.png

2. <br> 換行標籤

在HTML裡不是用 \n ,而是使用<br>來做換行。

  • 如果使用<br>換行標籤:
    <p>第一行文字<br> 第二行文字<br> 第三行文字</p>
    https://ithelp.ithome.com.tw/upload/images/20220907/20151992FeN4OAZQkM.png
    -> 在螢幕上會長這樣:
    第一行文字
    第二行文字
    第三行文字
    https://ithelp.ithome.com.tw/upload/images/20220907/201519925EIc9QPDtb.png

  • 如果在段落間使用<br>換行標籤:
    <p>第一行文字</p>
    <p>第二行文字</p>
    <br>
    <p>第三行文字</p>
    https://ithelp.ithome.com.tw/upload/images/20220907/20151992HkiRhQdDzn.png
    -> 在螢幕上就會長這樣:
    第一段文字
    第二段文字
     
    第三段文字
    https://ithelp.ithome.com.tw/upload/images/20220907/20151992OGfuivFls1.png

  • \n 在HTML網頁中會顯示成一個空白字元,而不是換行。

  • 相對於成對的起始標籤結束標籤,<br>則不需要結束標籤。

3. & n b s p ; 空白字元

在HTML裡如果輸入很多空格,會發現實際網頁中只顯示一格,因為HTML是用標籤來辨識的,所以很多的空格只會被解讀成一個空格。這時候可以用& n b s p ;來保留空格。

  • 如果直接輸入多個空格:
    iThome     鐵人賽
    https://ithelp.ithome.com.tw/upload/images/20220907/20151992CNEsOLu4zD.png
    -> 在螢幕上就會長這樣:
    iThome 鐵人賽
    https://ithelp.ithome.com.tw/upload/images/20220907/20151992ZsiBrwAAJo.png

  • 如果使用& n b s p ;語法:
    iThome & n b s p ; & n b s p ; & n b s p ; & n b s p ; & n b s p ;鐵人賽
    https://ithelp.ithome.com.tw/upload/images/20220907/20151992MiZRQRSVqu.png
    -> 在螢幕上就會保留多個空格:
    iThome     鐵人賽
    https://ithelp.ithome.com.tw/upload/images/20220907/20151992TdoLdbPZ7f.png

4. <h1>-<h6> 標題標籤

用來定義文字標題。預設都是粗體字,數字1-6表示不同的重要程度,依重要程度不同而有不同的文字大小。

  • <h1>是「最重要」的、文字大小也「最大」。
  • 依序到<h6>是「最不重要」的、文字大小也「最小」。
  • 不同數字可以看作是不同階層的關係,同樣的數字屬於同一階層。

例如:
<h1>h1標題</h1>
<h2>h2標題</h2>
<h3>h3標題</h3>
<h4>h4標題</h4>
<h5>h5標題</h5>
<h6>h6標題</h6>
https://ithelp.ithome.com.tw/upload/images/20220907/20151992EOSoPF2u91.png
-> 結果:

h1標題

h2標題

h3標題

h4標題

h5標題
h6標題

https://ithelp.ithome.com.tw/upload/images/20220907/20151992SONbdpLzIe.png

  • <h1> 每篇文章通常只會用一個,是表示頁面標題,搜尋引擎搜尋結果的基準
  • <h2> 最常用、用最多的標題
  • <h3> 若字數過多,可用來輔助細分
  • <h4> 比較常出現在側邊欄,需要標題但又不會太強眼
  • <h5> 可用在網站底部
  • <h6> 不太重要,可用在註腳

上一篇
Day6-HTML(四):body標籤
下一篇
Day8-HTML(六):強調內容標籤與旁注標籤
系列文
網頁前端設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言